<template>
  <div class="web-online-config">
    <div class="tip">温馨提示：在线咨询全局设置将在网站渠道生效</div>
    <scroll-postion height="calc(100vh - 110px)" :list="list" :revise="-10">
    <el-form class="main" ref="formMessages" :model="formMessages" label-position="left"  label-width="170px">
      <affix :id="list[0].id" class="basicSet margin-b-20" label="会话排队设置" ref="mainStep1">
        <el-form-item label="排队人数提醒：">
          <el-switch
            v-model="formMessages.queueNumSwitch"
            active-color="#459ae9"
            inactive-color="#ccc">
          </el-switch>
        </el-form-item>
        <div v-if="formMessages.queueNumSwitch">
          <el-input
            type="textarea"
            style="width: 550px"
            :rows="3"
            placeholder="例：您当前排在第{1}位，请耐心等候"
            v-model="formMessages.queueNumText">
          </el-input>
          <div class="prompt width-4">{1}表示排队数，必须加这个{1}格式，推送时将被实际的排队人数代替</div>
        </div>
        <!-- <el-form-item label="排队优先设置：">
          <el-switch
            v-model="formMessages.openPriority"
            active-color="#459ae9"
            inactive-color="#ccc">
          </el-switch>
          <el-tooltip
            transition="fade-leave"
            effect="dark"
            content="默认关闭，开启后，具有优先进线功能的客户发起咨询将优先被座席接待"
            placement="bottom">
            <i class="icon iconfont icon-tixingweizhi"></i>
          </el-tooltip>
        </el-form-item> -->
        <div v-if="formMessages.openPriority" class="priority_box">
          <div class="priority_title">客户状态优先进线设置：</div>
          <div class="priority_item" v-for="item in custArray">
            <span class="priority_item_name">{{item.name}}</span>
            <el-checkbox class="" v-model="item.checked">开启优先进线</el-checkbox>
          </div>
          <div class="prompt width-4">对未使用七陌CRM系统客户，可以在访客接入的时候，通过自定义字段指定是否优先进线，且进线顺序高于客户状态优先进线  <a href="https://developer.7moor.com/online-service-kf02/" target="_blank">查看如何设置</a></div>
        </div>
      </affix>
      <affix :id="list[1].id" class="basicSet margin-b-20" label="会话前设置" ref="mainStep2">
        <el-form-item label="访客回复消息后再接入会话：">
          <el-switch
            v-model="formMessages.accessAfterMessage"
            active-value="1"
            inactive-value="0"
            active-color="#459ae9"
            inactive-color="#ccc">
          </el-switch>
        </el-form-item>
      </affix>
      <!-- <affix :id="list[2].id" class="basicSet margin-b-20" label="会话中设置" ref="mainStep3">
        <el-form-item label="更换客服方式：">
          <el-switch
            v-model="formMessages.replaceCustSwitch"
            active-value="1"
            inactive-value="0"
            active-color="#459ae9"
            inactive-color="#ccc">
          </el-switch>
        </el-form-item>
        <el-form-item label="设定更换客服的方式：" v-if="formMessages.replaceCustSwitch === '1'">
          <el-radio-group v-model="formMessages.replaceCustomer">
            <el-radio label="random">随机更换</el-radio>
            <el-radio label="list">选择客服更换</el-radio>
          </el-radio-group>
        </el-form-item>
      </affix> -->
      <!-- <affix :id="list[3].id" class="basicSet margin-b-20" label="会话断开设置" ref="mainStep5">
        <el-form-item label="访客无响应时长设置:" prop="break_len" :rules="{ required: true, message: this.$t('validate.required'), trigger: 'blur'}">
          <el-input  type="age" v-model.trim="formMessages.break_len" class="width-4">
            <template slot="append">分钟</template>
          </el-input>
          <div class="prompt" style="margin-top: -8px">默认值为10分钟</div>
        </el-form-item>
        <el-form-item label="断开前提示时间设置:" prop="break_tips_len" :rules="{required: true, message: this.$t('validate.required'), trigger: 'blur'}">
          <el-input type="age" v-model.trim="formMessages.break_tips_len" class="width-4">
            <template slot="append">分钟</template>
          </el-input>
          <div class="prompt width-4" style="margin-top: -8px">默认值为"3分钟",提前3分钟提示客户会话将断开</div>
        </el-form-item>
        <el-form-item label="断开前提示内容:">
          <el-input v-model="formMessages.break_tips" type="textarea" class="width-4"></el-input>
          <p class="prompt width-4">默认值为"您已经很长时间没有发送消息了，再过3分钟系统将自动断开会话"</p>
        </el-form-item>
        <el-form-item label="结束会话后访客端提示语:">
          <el-input v-model="formMessages.finishText" type="textarea" class="width-4"></el-input>
          <p class="prompt width-4">默认值为"【系统消息】会话已被系统终结，如有需要，您可以重新发起会话！"</p>
        </el-form-item>
      </affix> -->
      <affix :id="list[2].id" class="basicSet margin-b-20" label="关键词设置" ref="mainStep6">
        <el-form-item label="访客关键词提示：">
          <el-switch
            style="display: block;margin-bottom: 7px"
            active-value="1"
            inactive-value="0"
            v-model="formMessages.focusSensitiveWords"
            active-color="#459ae9"
            inactive-color="#ccc">
          </el-switch>
          <el-input v-model="formMessages.focusWords" type="textarea" class="width-4"></el-input>
          <p class="prompt width-4">访客关键词用于提示座席重点关注词汇，当会话中出现时，将会以设置颜色重点显示出来（多个关键词用英文逗号或回车隔开）"</p>
        </el-form-item>
        <el-form-item label="访客敏感词屏蔽：">
          <el-switch
            style="display: block;margin-bottom: 7px"
            active-value="1"
            inactive-value="0"
            v-model="formMessages.filterSensitiveWords"
            active-color="#459ae9"
            inactive-color="#ccc">
          </el-switch>
          <el-input v-model="formMessages.sensitiveWords" type="textarea" class="width-4"></el-input>
          <p class="prompt width-4">访客发送的消息若包含以下敏感词信息，座席收到的消息将用*代替（多个关键词用英文逗号或回车隔开）</p>
        </el-form-item>
      </affix>
    </el-form>
      <div style="margin-top: 20px;text-align: center">
        <el-button type="primary" @click.stop="submitForm" class="primary_btn">{{$t('config.channel.saveSettings')}}</el-button>
      </div>
    </scroll-postion>
  </div>
</template>
<script>
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import scrollPostion from '../base/scrollPostion'
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'webOnlineConfig',
    data () {
      return {
        list: [
					{id: 'form0', name: '会话排队设置'},
					{id: 'form1', name: '会话前设置'},
					// {id: 'form2', name: '会话中设置'},
					// {id: 'form4', name: '会话断开设置'},
					{id: 'form5', name: '关键词设置'}
				],
        custArray: [],  //  客户状态数组
        formMessages: {
          sensitiveWords: '',
          focusWords: '',
          queueNumSwitch: false, // 排队人数提醒
          queueNumText: '', // 排队人数值
          openPriority: false, // 是否开启优先进线功能
          accessAfterMessage: '0', // 访客回复消息后再接入会话
          replaceCustSwitch: '0',    // 更换客服方式
          replaceCustomer: 'list',   // 设定更换客服的方式
          break_len: '10',  // 访客无响应断开对话时长
          break_tips_len: '3',  // 断开前提示时间点
          break_tips: '', // 断开前提示内容
          finishText: '',  // 结束会话后访客端提示语
          focusSensitiveWords: '0', // 是否开启关键词提示开关
          filterSensitiveWords: '0', // 敏感词屏蔽开关
          _id: '',
          priorityList: []
        }
      }
    },
    components: {
      affix,
      scrollPostion
    },
    computed: {
    },
    methods: {
      submitForm () {
        this.$refs.formMessages.validate((valid) => {
          if (valid) {
            let priorityArr = []
            this.custArray.forEach((item) => {
              if (item.checked) {
                priorityArr.push(item.status)
              }
            })
            let data = Object.assign(this.formMessages, {priorityList: priorityArr})
            console.log(data)
            data.backgroundColor = 'FF0000'
            this.$store.dispatch('saveECommerceGlobalSet', data).then((rep) => {
              if (rep.success) {
                this.$message.success(this.$t('config.channel.configSuccess'))
              } else {
                this.$message.error(this.$t('qualityCheck.saveFali'))
              }
            })
          } else {
            this.$message.error(this.$t('自定义字段不能为空'))
            return false
          }
        })
      },
      init (obj) {
        for (var item in this.formMessages) {
          this.formMessages[item] = obj[item] === undefined ? this.formMessages[item] : obj[item]
        }
        if (!this.formMessages.openPriority) {
          this.$set(this.formMessages, 'openPriority', false)
        }
        if (!this.formMessages.priorityList) {
          this.$set(this.formMessages, 'priorityList', [])
        }
        if (this.formMessages.priorityList && this.formMessages.priorityList.length && this.custArray.length) {
          let priorityList = deepClone(this.formMessages.priorityList)
          priorityList.forEach((list) => {
            this.custArray.forEach((item) => {
              if (item.status === list) {
                this.$set(item, 'checked', true)
              }
            })
          })
        }
      }
    },
    beforeMount () {
      let p1 = this.$store.dispatch('getECommerceGlobalSet', {})
      let p2 = this.$store.dispatch('getCustomerTemplate', {account: this.$store.state.session.user.account})
      Promise.all([p1, p2]).then(([res1, res2]) => {
        if (res2 && res2.data && res2.data.length) {
          let row = res2.data[0].status
          if (row) {
            this.custArray = []
            for (let m in row) {
              let obj = {
                status: m,
                name: row[m],
                checked: false
              }
              this.custArray.push(obj)
            }
          }
        }
        if (res1 && res1.row) {
          this.init(res1.row)
        }
      })
    },
    watch: {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .icon-tixingweizhi
    border: 1px solid $c-main
    border-radius: 50%
    display: inline-block
    height: 16px
    width: 16px
    text-align: center
    line-height: 16px
    font-size: 10px
    color $c-main
    cursor pointer
    margin-left 10px
  .width-4
    width 400px
  .main
    width: 588px;
    margin: 20px;
    padding-top: 1px
  .priority_box
    .priority_title
      margin-bottom 10px
    .priority_item
      height 40px
      .el-checkbox
        vertical-align top
    div,.priority_item_name
      font-size 12px
    .priority_item_name
      margin-right: 10px
      display: inline-block
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      width: 140px
  .prompt
    color $c-prompt
    line-height normal
    font-size 12px
  .title
    color $c-prompt
    height 30px
    line-height 30px
    padding 3px 10px
    border-bottom 1px solid $c-border1
  .tip
    font-size 12px
    padding 10px
    color $c-prompt
    margin-bottom 20px
    background-color #f4f5f9
    border-bottom 1px solid #cccccc
</style>
